<template>
  <div class="dashboard-container">
    <div class="dashboard-text">欢迎使用新生助手管理平台</div>
    <div class="text item">
      <span>个人信息</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="openPassword">修改密码</el-button>
    </div>
    <div class="text item">
      {{ '姓名：' + name }}
    </div>
    <div class="text item">
      {{ '账号：' + userName }}
    </div>
    <div class="text item">
      类型：<el-tag type="success">{{ roles| roleFilter }}</el-tag>
    </div>
    <div style="display: flex;flex-wrap: wrap;">
      <div style="width: 50%;height: 300px" id="yuanxi"></div>
      <div style="width: 50%;height: 300px" id="zhuanye"></div>
      <div style="width: 50%;height: 300px" id="sex"></div>
    </div>
    <el-dialog title="密码修改" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="formRules">
        <el-form-item label="原密码" label-width="150px" prop="oldPassword">
          <el-input
            ref="oldPassword"
            v-model="form.oldPassword"
            placeholder="请输入原密码"
            name="oldPassword"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>
        <el-form-item label="密码" label-width="150px" prop="password">
          <el-input
            ref="password"
            v-model="form.password"
            placeholder="请输入新密码"
            name="password"
            type="password"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>
        <el-form-item label="确认密码" label-width="150px" prop="r_password">
          <el-input
            ref="r_password"
            v-model="form.r_password"
            placeholder="请再次输入新密码"
            name="r_password"
            type="password"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updatePassword } from '@/api/user'
import { report } from '@/api/report'
import { validNotNull } from '@/utils/validate'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name', 'userName', 'roles'
    ])
  },
  filters: {
    roleFilter(role) {
      const statusMap = {
        1: '超级管理员',
        2: '学生'
      }
      return statusMap[role]
    }
  },
  data() {
    const validateText = (rule, value, callback) => {
      if (!validNotNull(value)) {
        callback(new Error('请输入原密码！'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度的要大于6位!'))
      } else {
        callback()
      }
    }
    const validateTwoPassword = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次密码输入不一致!'))
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      form: {
        userName: '',
        oldPassword: '',
        password: '',
        r_password: ''
      },
      formRules: {
        oldPassword: [{ required: true, trigger: 'blur', validator: validateText }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        r_password: [{ required: true, trigger: 'blur', validator: validateTwoPassword }]
      },
      sysMessage: []
    }
  },
  methods: {
    // 打开修改密码页面
    openPassword() {
      this.dialogFormVisible = true
    },
    // 提交
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.role = this.roles
          updatePassword(this.form).then(res => {
            if (res.code === '200') {
              this.dialogFormVisible = false
              this.$message.success(res.result)
            } else {
              this.$message.error(res.message)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          return false
        }
      })
    },

  },
  mounted() {
    let yuanxiXdata = [];
    let yuanxiYdata = [];
    let zhuanyeXdata = [];
    let zhuanyeYdata = [];
    let sexData = [];
    report().then(res => {
      res.result.faculty.forEach(item =>{
        yuanxiXdata.push(item.name)
        yuanxiYdata.push(item.value)
      })
      res.result.major.forEach(item =>{
        zhuanyeXdata.push(item.name)
        zhuanyeYdata.push(item.value)
      })
      sexData = res.result.sex
      let yuanxiDom = document.getElementById('yuanxi');
      let yuanxiChart = this.$echarts.init(yuanxiDom);
      yuanxiChart.setOption({
        title: {
          text: '院系报道统计'
        },
        xAxis: {
          type: 'category',
          data: yuanxiXdata
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            label: {
              show: true
            },
            data: yuanxiYdata,
            type: 'bar'
          }
        ]
      });
      let zhuanyeDom = document.getElementById('zhuanye');
      let zhuanyeChart = this.$echarts.init(zhuanyeDom);
      zhuanyeChart.setOption({
        title: {
          text: '专业报道统计'
        },
        xAxis: {
          type: 'category',
          data: zhuanyeXdata
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            label: {
              show: true
            },
            data: zhuanyeYdata,
            type: 'bar'
          }
        ]
      });
      let sexDom = document.getElementById('sex');
      let sexChart = this.$echarts.init(sexDom);
      sexChart.setOption({
        title: {
          text: '男女人数统计'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: sexData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    })
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    text-align: center;
    margin-bottom: 30px;
  }
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>
